<template>
  <div class="getArticle">
    <div class="article">
        <n-tabs type="line" animated>
          <n-tab-pane v-if="token" name="Your Feed" tab="Your Feed"><ArticleList ArticleClassify='Your Feed'/></n-tab-pane>
          <n-tab-pane name="Global Feed" tab="Global Feed">
           <ArticleList ArticleClassify='Global Feed'/>
          </n-tab-pane>
          <n-tab-pane :name="className+''" :tab="className"> <ArticleList :ArticleClassify="className"/> </n-tab-pane>
        </n-tabs>
    </div>
    <div class="classify">
       <div class="classifyList">
        <span @click="showClassify(item)" v-for="item in classify" :key="item.about">{{item.about}}</span>
       </div>
    </div>
  </div>
</template>

<script>  
import {storeToRefs} from 'pinia'
import {store} from '@/store'
import ArticleList from '@/components/ArticleList'
import { onMounted, ref } from 'vue';
import {getClassifyAPI} from '@/api/index'
export default {
  components:{
    ArticleList
  },
  setup(){
    const classify=ref([])
    const className=ref('')
    const Store=store()
    let {token} =storeToRefs(Store)
    const getClassifyFn=async()=>{
      const res=await getClassifyAPI()
      classify.value=res.data
    }
    onMounted(()=>{
      getClassifyFn()
    })
    return{
     token,
     classify,
     showClassify(item){
         className.value=item.about
     },
     className
    }
  }
};
</script>

<style>
.getArticle {
  width: 1110px;
  height: 200px;
  margin: 40px auto;
  display: flex;
  justify-content: space-between;
}
.article {
  width: 825px;
  height: 200px;
}
.classify {
  width: 235px;
  height: 200px;
  border: 1px solid;
  padding: 10px;
  background-color: #F3F3F3;
  
}
.classifyList{
display: flex;
  flex-wrap: wrap;
}
.classifyList>span{
  margin:  5px;
  background-color: #818A91;
  padding: 0px 5px;
  border-radius: 10px;
}
</style>